<template>
    <div>
    <div > 
        <span>计算器</span>
    </div>

    <div id="appji">
        <div class="calculatorji">
          <button @click="changeModeEvent" class="toggle-buttonji">
            <p v-if="changeMode">显示高级模式     ⚈</p>
            <p v-else>显示基本模式    ⚆</p>
          </button>
          <div class="resultsji">
            <input class="inputji" v-model="current" />
          </div>
          <div class="modeji" v-if="changeMode">
            <button class="buttonji" @click="press">7</button>
            <button class="buttonji" @click="press">8</button>
            <button class="buttonji" @click="press">9</button>
            <button class="buttonji" @click="press">*</button>
            <button class="buttonji" @click="press"><=</button>
            <button class="buttonji" @click="press">C</button>
            <button class="buttonji" @click="press">4</button>
            <button class="buttonji" @click="press($event)">5</button>
            <button class="buttonji" @click="press">6</button>
            <button class="buttonji" @click="press">/</button>
            <button class="buttonji" @click="press">(</button>
            <button class="buttonji" @click="press">)</button>
            <button class="buttonji" @click="press">1</button>
            <button class="buttonji" @click="press">2</button>
            <button class="buttonji" @click="press">3</button>
            <button class="buttonji" @click="press">-</button>
            <button class="buttonji" @click="press">x 2</button>
            <button class="buttonji" @click="press">±</button>
            <button class="buttonji" @click="press">0</button>
            <button class="buttonji" @click="press">.</button>
            <button class="buttonji" @click="press">%</button>
            <button class="buttonji" @click="press">+</button>
            <button class="buttonji equal-sign" @click="press">=</button>  
          </div>
          <div class="modeji" v-else>
            <button class="buttonji" @click="press">sin</button>
            <button class="buttonji" @click="press">cos</button>
            <button class="buttonji" @click="press">tan</button>
            <button class="buttonji" @click="press">x^</button>
            <button class="buttonji" @click="press"><=</button>
            <button class="buttonji" @click="press">C</button>
            <button class="buttonji" @click="press">log</button>
            <button class="buttonji" @click="press">ln</button>
            <button class="buttonji" @click="press">e</button>
            <button class="buttonji" @click="press">°</button>
            <button class="buttonji" @click="press">rad</button>
            <button class="buttonji" @click="press">√</button>
            <button class="buttonji" @click="press">7</button>
            <button class="buttonji" @click="press">8   </button>
            <button class="buttonji" @click="press">9</button>
            <button class="buttonji" @click="press">/</button>
            <button class="buttonji" @click="press">x 2</button>
            <button class="buttonji" @click="press">x !</button>
            <button class="buttonji" @click="press">4</button>
            <button class="buttonji" @click="press">5</button>
            <button class="buttonji" @click="press">6</button>
            <button class="buttonji" @click="press">*</button>
            <button class="buttonji" @click="press">(</button>
            <button class="buttonji" @click="press">)</button>
            <button class="buttonji" @click="press">1</button>
            <button class="buttonji" @click="press">2</button>
            <button class="buttonji" @click="press">3</button>
            <button class="buttonji" @click="press">-</button>
            <button class="buttonji" @click="press">%</button>
            <button class="buttonji" @click="press">±</button>
            <button class="buttonji" @click="press">0</button>
            <button class="buttonji" @click="press">.</button>
            <button class="buttonji" @click="press">π</button>
            <button class="buttonji" @click="press">+</button>                    
            <button class="buttonji equal-sign" @click="press">=</button>
          </div>
        </div>
    </div>
    </div>
</template>

<!-- <script src="../assets/js/vue.min.js"></script> -->
<script>
    import { FullCalendar } from 'vue-fullcalendar'
    export default {
        components: {'full-calendar': require('vue-fullcalendar')},
        data() {
            return {
                current: '',
                changeMode: true
            }
        },
        methods: {
    press: function (event) {
      let me = this
      let key = event.target.textContent

      if (
        key != '=' && 
        key != 'C' &&
        key != '*' &&
        key != '/' &&
        key != '√' &&
        key != "x 2" &&
        key != "%" &&
        key != "<=" && 
        key != "±" && 
        key != "sin" && 
        key != "cos" && 
        key != "tan" && 
        key != "log" && 
        key != "ln" && 
        key != "x^" && 
        key != "x !" && 
        key != "π" && 
        key != "e" && 
        key != "rad" && 
        key != "°"
      ) {
        me.current += key
        
      } else if (key === '=') {
        
        if ((me.current).indexOf('^') > -1) {
          let base = (me.current).slice(0, (me.current).indexOf('^'))
          let exponent = (me.current).slice((me.current).indexOf('^') + 1)
          me.current = eval('Math.pow(' + base + ',' + exponent + ')')
        } else {
          me.current = eval(me.current)
        }
      
      } else if (key === 'C') {
        
        me.current = ''

      } else if (key === '*') {
        
        me.current += '*'

      } else if (key === '/') {
        
        me.current += '/'

      } else if (key === '+') {
        
        me.current += '+'

      } else if (key === '-') {
        
        me.current += '-'

      } else if (key === '±') {
        
        if ((me.current).charAt(0) === '-') {
          me.current = (me.current).slice(1)
        } else {
          me.current = '-' + me.current
        }

      } else if (key === '<=') {
        
        me.current = me.current.substring(0, me.current.length - 1)

      } else if (key === '%') {
        
        me.current = me.current / 100

      } else if (key === 'π') {
        
        me.current = me.current * Math.PI

      } else if (key === 'x 2') {
        
        me.current = eval(me.current * me.current)

      } else if (key === '√') {
        
        me.current = Math.sqrt(me.current)

      } else if (key === 'sin') {
        
        me.current = Math.sin(me.current)

      } else if (key === 'cos') {
        
        me.current = Math.cos(me.current)

      } else if (key === 'tan') {
        
        me.current = Math.tan(me.current)

      } else if (key === 'log') {
        
        me.current = Math.log10(me.current)

      } else if (key === 'ln') {
        
        me.current = Math.log(me.current)

      } else if (key === 'x^') {
        
        me.current += '^'

      } else if (key === 'x !') {

        let number = 1
        if (me.current === 0) {
          me.current = '1'
        } else if (me.current < 0) {
          me.current = NaN
        } else {
          let number = 1
          for (let i = me.current; i > 0; i--) {
            number *= i
          }
          me.current = number
        }

      } else if (key === 'e') {
        
        me.current = Math.exp(me.current)

      } else if (key === 'rad') {
        
        me.current = me.current * (Math.PI / 180)

      } else if (key === '°') {

        me.current = me.current * (180 / Math.PI)

      }
    },
    changeModeEvent: function() {
      let me = this
      me.changeMode = !me.changeMode
    }
  }
    }
    </script>

<style>
   @import '../assets/css/jisuanqi.css';
</style>